// 定义 Sass 变量
$light-theme: (
    background: #ffffff,
    surface: #f5f5f5,
    text: #333333,
    text-secondary: #666666,
    primary: #007bff,
    primary-hover: #0056b3,
    secondary: #6c757d,
    secondary-hover: #5a6268,
    error: #dc3545,
    error-hover: #bb2d3b,
    success: #28a745,
    success-hover: #218838,
    warning: #ffc107,
    warning-hover: #e0a800,
    border: #dddddd,
    shadow: rgba(0, 0, 0, 0.1)
);

$dark-theme: (
    background: #121212,
    surface: #1e1e1e,
    text: #e0e0e0,
    text-secondary: #b0b0b0,
    primary: #bb86fc,
    primary-hover: #9a67ea,
    secondary: #03dac6,
    secondary-hover: #00b8a9,
    error: #cf6679,
    error-hover: #b9556a,
    success: #4caf50,
    success-hover: #43a047,
    warning: #ffa726,
    warning-hover: #fb8c00,
    border: #444444,
    shadow: rgba(255, 255, 255, 0.1)
);

// 将 Sass 变量映射到 CSS 变量
:root {
    @each $key, $value in $light-theme {
        --#{$key}: #{$value};
    }
}

[data-theme="dark"] {
    @each $key, $value in $dark-theme {
        --#{$key}: #{$value};
    }
}

// 使用 Sass 变量和 CSS 变量
body {
    background-color: var(--background);
    color: var(--text);
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    transition:
        background-color 0.3s,
        color 0.3s;
}

.container {
    background-color: var(--surface);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border);
    box-shadow: 0 4px 6px var(--shadow);
}

.button {
    background-color: var(--primary);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;

    &:hover {
        background-color: var(--primary-hover);
    }

    &.secondary {
        background-color: var(--secondary);

        &:hover {
            background-color: var(--secondary-hover);
        }
    }

    &.error {
        background-color: var(--error);

        &:hover {
            background-color: var(--error-hover);
        }
    }

    &.success {
        background-color: var(--success);

        &:hover {
            background-color: var(--success-hover);
        }
    }

    &.warning {
        background-color: var(--warning);

        &:hover {
            background-color: var(--warning-hover);
        }
    }
}

.icon {
    font-size: 13px;
    display: inline-block;
    width: 1em;
    height: 1em;
    font-size: inherit;
    color: inherit;
    vertical-align: -0.125em;
    fill: currentColor;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
}

.spinner {
    animation: rotator 1.4s linear infinite;
}

@keyframes rotator {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
